<template>
  <div class="container">
    <div class="app-container">
      <el-card :body-style="{ padding: '40px' }">
        <el-row :gutter="40">
          <el-col :span="5">
            <!-- 筛选表单 -->
            <!-- 搜索输入框 -->
            <el-input
              prefix-icon="el-icon-search"
              size="small"
              v-model.trim="queryData.keyword"
              @input="searchChange"
              clearable
              placeholder="请输入员工姓名全员搜索"
            ></el-input>
            <br>
            <!-- 组织架构树 -->
            <el-tree
              ref="tree"
              node-key="id"
              :data="treeList"
              default-expand-all
              highlight-current
              :props="{ label: 'name' }"
              @current-change="selectChange"
            ></el-tree>
          </el-col>
          <el-col class="left" :span="19">
            <!-- 操作按钮 -->
            <el-row type="flex" justify="end">
              <el-button size="mini" type="primary">添加员工</el-button>
              <el-button size="mini">excel导入</el-button>
              <el-button size="mini">excel导出</el-button>
            </el-row>
            <br />
            <!-- 表格 -->
            <el-table :data="list">
              <el-table-column prop="staffPhoto" label="头像">
                <template slot-scope="{ row }">
                  <el-avatar
                    size="small"
                    v-if="row.staffPhoto"
                    :src="row.staffPhoto"
                    alt=""
                  />
                  <span v-else class="username">{{
                    row.username?.charAt(0)
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="username" label="姓名"></el-table-column>
              <el-table-column
                prop="mobile"
                sortable
                label="手机号"
              ></el-table-column>
              <el-table-column
                prop="mobile"
                sortable
                label="工号"
              ></el-table-column>
              <el-table-column prop="formOfEmployment" label="聘用形式">
                <template slot-scope="{ row }">
                  {{ row.formOfEmployment * 1 === 1 ? "正式" : "非正式" }}
                </template>
              </el-table-column>
              <el-table-column
                prop="departmentName"
                label="部门"
              ></el-table-column>
              <el-table-column
                prop="timeOfEntry"
                sortable
                label="入职时间"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <el-button size="mini" type="text">查看</el-button>
                  <el-button size="mini" type="text">角色</el-button>
                  <el-popconfirm @confirm="delRow(row.id)" title="这是一段内容确定删除吗？">
                    <el-button size="mini" slot="reference" type="text">删除</el-button>
                  </el-popconfirm>
                  
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              @current-change="currentChange"
              :current-page.sync="queryData.page"
              :page-size="queryData.pagesize"
              layout="total,  prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { delEmployeeInfoApi, getEmployeeListApi } from "@/api/employee";
import { getDepartmentListApi } from "@/api/department";
import { transListToTreeData } from "@/utils";
export default {
  name: "Employee",
  data() {
    return {
      // 列表变量
      list: [],
      // 列表查询参数
      queryData: {
        page: 1,
        pagesize: 10,
        keyword: "",
        departmentId: null,
      },
      // 总数
      total: 0,
      // 组织架构的数据
      treeList: [],
    };
  },
   created() {
     this.getTreeData();
  },
  methods: {
    // 获取组织架构树
    async getTreeData() {
      // 1. 请求数据
      let res = await getDepartmentListApi();
      // 2. 处理数据
      let result = transListToTreeData(res, 0);
      console.log("🚀 ~ file: index.vue:128 ~ getTreeData ~ result:", result)
      // 3. 赋值变量
      this.treeList = result;  // 赋值，模板要更新了，树要绘制了！！！  【耗时】
      this.queryData.departmentId = result[0].id 
      // 4. 默认让第一个节点高亮
      this.$nextTick(()=>{
        this.$refs.tree.setCurrentKey(result[0].id)  // 给树的第一个节点设置为高亮状态！！！
      })
      // 5. 获取列表数据
      this.initData();
    },
    // 获取员工列表
    async initData() {
      // 1. 调用APi函数
      let { rows, total } = await getEmployeeListApi(this.queryData);
      // 2. 赋值
      this.list = rows;
      this.total = total;
    },
    // 页码切换事件
    currentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 树的高亮切换事件
    selectChange(val){
      // val就是点击行的数据
      this.queryData.departmentId = val.id
      this.queryData.page = 1
      this.initData()
    },
    // 搜索提交
    searchChange(){
      if(this.timer) clearTimeout(this.timer)
      this.timer =  setTimeout(()=>{
         this.queryData.page = 1
         this.initData()
      },400)
    },
    // 删除事件
    async delRow(id){
      // 1. 发起删除请求
      await delEmployeeInfoApi(id);
      // 2. 提示成功
      this.$message.success('删除成功')
      // 3. 边缘处理
      if(this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--
      }
      // 4. 重新获取列表
      this.initData()
    }
  },
};
</script>
<style>
.left {
  border-left: 1px solid #eee;
}
.username {
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  background: #04c9be;
  font-size: 12px;
  display: inline-block;
}
</style>
